import React from 'react';
import {Card, Button,Radio} from 'antd';
import './ui.less';

export default class Buttons extends React.Component {
    state={
        iconLoading:false,
        size:'default',
    };
    enterIconLoading = ()=> {
        this.setState({ iconLoading: !this.state.iconLoading });
        console.log('this.state',this.state.iconLoading)
    };

    handleChange = (e) => {
        this.setState({
            size:e.target.value
        })

    }

    render() {
        return (
            <div>
                <Card title="基础按钮" className="card-wrap">
                    <Button type="primary">imooc</Button>
                    <Button>imooc</Button>
                    <Button type="dashed">imooc</Button>
                    <Button type="danger">imooc</Button>
                    <Button disabled>imooc</Button>
                </Card>
                <Card title="图形按钮" className="card-wrap" >
                    <Button icon="plus">创建</Button>
                    <Button icon="edit">编辑</Button>
                    <Button icon="delete">删除</Button>
                    <Button shape="circle" icon="search"/>
                    <Button type="primary" icon="search">搜索</Button>
                    <Button type="primary" icon="download">下载</Button>
                </Card>
                <Card title="加载按钮" className="card-wrap" >
                    <Button loading={this.state.iconLoading} type="primary">确定</Button>
                    <Button loading type="primary" shape="circle"/>
                    <Button loading={this.state.iconLoading} >点击加载</Button>
                    <Button loading  shape="circle"/>
                    <Button type="primary"  onClick={this.enterIconLoading} >关闭</Button>

                </Card>
                <Card title="按钮组" style={{marginBottom:10}}>
                    <Button  type="primary" icon="left">后退</Button>
                    <Button  type="primary" icon="right">前进</Button>
                </Card>
                <Card title="按钮大小" className="card-wrap">
                    <Radio.Group value={this.state.size} onChange={this.handleChange}>
                        <Radio value="small">小</Radio>
                        <Radio value="default">中</Radio>
                        <Radio value="large">大</Radio>
                    </Radio.Group>
                    <Button  type="primary" size={this.state.size}>imooc</Button>
                    <Button  type="primary" size={this.state.size}>imooc</Button>
                    <Button  type="primary" size={this.state.size}>imooc</Button>
                </Card>


            </div>

        );
    }

}
